<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		<link rel="stylesheet" href="css/sidebar.css" />
		<style>
			div{
				width: 300px;
				height: 300px;
			}
			div.taiyi{
				background: url(img/4.png);
				background-size: 100% 100%;
				position: absolute;
				/* 堆叠属性：必须存在相对或者绝对定位情况下，z-index堆叠属性：属性值：9999内 */
				z-index: 999;
			}
			div.shengongbao{
				background: url(img/1.png);
				background-size: 100% 100%;
				position: absolute;
				z-index: 1000;
			}
		</style>
	</head>
	<body>
		<!-- 左栏：左栏弹窗功能 
		语义化元素---div功能一致【有宽没高区域】
		div起名---不利于SEO优化
		涵盖名称---有利于SEO优化
		建议：搭建页面结构，固定功能：左栏、主区域、导航栏..
		      使用语义化元素
		article元素：独立的内容区域块，存：新闻、博客区域、左栏弹出的功能栏！
		-->
		<article>
			<ul class="sidebar">
				<!-- 左栏弹出框：找到无序列表第一个li上，div起名outer -->
				<div class="outer"></div>
				<li>手机</li>
				<li>电视</li>
				<li>家电</li>
				<li>笔记本 平板 显示器</li>
				<li>出行 穿戴</li>
				<li>耳机 音箱</li>
				<li>健康 儿童</li>
				<li>生活 箱包</li>
				<li>智能 路由器</li>
				<li>电源 配件</li>
			</ul>
		</article>
		
		
		
		<!-- 相对定位与绝对定位，页面弹出功能
		     相对定位：position:relative，使用率高：相对于父级定位、元素存在于文档流中
			 绝对定位：position:absolute，使用率较高：存在父级，按照父级定位，没有父级按照，网页
			          左上角位置进行定位，元素脱离文档流！
					   堆叠问题：z-index属性：属性值，属性值越大，越靠前！
					   根据相对定位与绝对定位特点，实现左栏功能
					   左栏区使用相对定位：左栏区域基本不会移动【理解：钩点位】
					   左栏弹出使用绝对定位：左栏弹出区域频繁切换【理解：钩子】
		 -->
		 <d iv class="taiyi"></div>
		 <d iv class="shengongbao"></div>
	</body>
</html>